<template>
	<div class="find-car-statistics page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
		<!-- <van-nav-bar title="寻车统计" fixed placeholder :border='false'>
			<template #left>
				<van-icon
				name="arrow-left"
				size="18"
				@click="goback()"
				/>
			</template>
		</van-nav-bar> -->
    <navbar :title="titleHeader"></navbar>
    <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
		<van-tabs
			v-model="activeName"
			color="#F6C401"
			line-width='30px'
			line-height='3px'
			title-active-color='#333333'
			title-inactive-color='#666666'
			id="tabs"
			ref="tabs"
			duration="0"
			>

			<van-tab title="全部寻车" name="a" >
				<find-time :statisticsData='statisticsData'></find-time>
				<!-- 公司排名 -->
				<ranking
				:switchContent='switchContent'
				:ranking='ranking'
				v-if="ranking"
				>
					<div class="head-box">
						<div class="title">{{title}}</div>
						<!-- jumpToRanks() 第一个参数是公司排名，第二个参数是全部寻车 -->
						<div class="more" @click="jumpToRanks(1,1)">
							查看更多
							<van-icon name="arrow" />
						</div>
					</div>
				</ranking>
				<!-- 车型排名 -->
				<ranking
				:switchContent='switchContentType'
				:ranking='rankingType'
				v-if="rankingType"
				>
					<div class="head-box">
						<div class="title">{{titleType}}</div>
						<div class="more" @click="jumpToRanks(2,1)">
							查看更多
							<van-icon name="arrow" />
						</div>
					</div>
				</ranking>
			</van-tab>

			<van-tab title="全款" name="b">
				<find-time :statisticsData='statisticsData'></find-time>
				<!-- 公司排名 -->
				<ranking
				:switchContent='switchContent'
				:ranking='rankingAllPay'
				>
					<div class="head-box">
						<div class="title">{{title}}</div>
						<div class="more" @click="jumpToRanks(1,2)">
							查看更多
							<van-icon name="arrow" />
						</div>
					</div>
				</ranking>
				<!-- 车型排名 -->
				<ranking
				:switchContent='switchContentType'
				:ranking='rankingTypeAllPay'
				>
					<div class="head-box">
						<div class="title">{{titleType}}</div>
						<div class="more" @click="jumpToRanks(2,2)">
							查看更多
							<van-icon name="arrow" />
						</div>
					</div>
				</ranking>
			</van-tab>

			<van-tab title="按揭" name="c">
				<find-time :statisticsData='statisticsData'></find-time>
				<!-- 公司排名 -->
				<ranking
				:switchContent='switchContent'
				:ranking='rankingMortgage'
				>
					<div class="head-box">
						<div class="title">{{title}}</div>
						<div class="more" @click="jumpToRanks(1,3)">
							查看更多
							<van-icon name="arrow" />
						</div>
					</div>
				</ranking>
				<!-- 车型排名 -->
				<ranking
				:switchContent='switchContentType'
				:ranking='rankingTypeMortgage'
				>
					<div class="head-box">
						<div class="title">{{titleType}}</div>
						<div class="more" @click="jumpToRanks(2,3)">
							查看更多
							<van-icon name="arrow" />
						</div>
					</div>
				</ranking>
			</van-tab>
		</van-tabs>
    </div>
	</div>
</template>

<script>
	import findTime from '../../components/common/findTime.vue'
	import ranking from '../../components/common/ranking.vue'
	import { getFindCarSta1 } from './api'

	export default {
		components: {
			findTime,
			ranking,
		},
		data() {
			return {
      // header栏 => 标题
      titleHeader:"寻车统计",
				title: '公司排行前十名',
				switchContent: ['金额','用户','车辆'],
				ranking: null,
				activeName: 'a',
				titleType: '车型统计前十名',
				switchContentType: ['品牌','车型'],
				rankingType: null,
				statisticsData: [
					{'statistics': '本年度寻车次数', 'num': null},
					{'statistics': '本季度寻车次数', 'num': null},
					{'statistics': '本月寻车次数', 'num': null},
					{'statistics': '本周寻车次数', 'num': null}
				],
				rankingAllPay: {},
				rankingTypeAllPay: {},
				rankingMortgage: {},
				rankingTypeMortgage: {},
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:'',
				tabsName: ['全部寻车','全款','按揭'],
				resize: false
			}
		},
		methods: {
			goback() {
        this.$router.go(-1)
      },
			jumpToRanks(n,m) {
				/**
				 * m === 1 全部寻车
				 * m === 2 全款
				 * m === 3 按揭
				 */
				//当n===1时，传递公司排名的参数
				if(n===1){
					this.$router.push({
						name: 'RanksPage',
						query: {
							whatRank: '1',
							rankId: m
						}
					})
				}
				//当n===2时，传递车型排名的参数
				if(n===2){
					this.$router.push({
						name: 'RanksPage',
						query: {
							whatRank: '2',
							rankId: m
						}
					})
				}
			},
      // 获取路由链接上拼接的token值
      getTokenInUrl() {
        var url = window.location.href;
        if (url.indexOf("token") > 0) {
          let getTokenParams = window.location.href.split("token=")[1];
          getTokenParams=getTokenParams.split("&")[0];
          if (getTokenParams.length >= 32) {
            getTokenParams = getTokenParams.substr(0, 32);
            console.log('%c [ getTokenParams ]', 'font-size:13px; background:pink; color:#bf2c9f;', getTokenParams)
            sessionStorage.setItem("token", getTokenParams);
          }
        }
      },
			// 处理数据
			handelAllFindConpany(data) {
				let price = data.map((item,index) => {
					let percent
					if(index === 0) {
						percent = 100
					} else {
						percent = (item.money/data[0].money*100) || (item.userNumber/data[0].userNumber*100) || (item.vehicleNumber/data[0].vehicleNumber*100) || (item.brandNumber/data[0].brandNumber*100) || (item.carModelName/data[0].carModelName*100)
					}
					return {
						rank: index+1,
						name: item.companyName || item.brandName || item.carModelName,
						num: item.money || item.userNumber || item.vehicleNumber || item.brandNumber ,
						percent: percent
					}
				})
				let cutOutPrice = []
				for(let i = 0; i<price.length; i++) {
					if(i<10) {
						cutOutPrice.push(price[i])
					}
				}
				// console.log(cutOutPrice)
				return cutOutPrice
			},
			// 全部寻车
			allFindCar(data) {
				let price = this.handelAllFindConpany(data.statistics.findAllCars.companyRanking.amount)
				let user = this.handelAllFindConpany(data.statistics.findAllCars.companyRanking.user)
				let vehicle = this.handelAllFindConpany(data.statistics.findAllCars.companyRanking.vehicle)
				this.ranking = {
					price,
					user,
					vehicle
				}
				let brand = this.handelAllFindConpany(data.statistics.findAllCars.carStatistics.brand)
				let carType = this.handelAllFindConpany(data.statistics.findAllCars.carStatistics.carModel)
				this.rankingType = {
					brand,
					carType
				}
				// console.log(this.rankingType)
			},
			// 全款
			payAll(data) {
				let price = this.handelAllFindConpany(data.companyRanking.amount)
				let user = this.handelAllFindConpany(data.companyRanking.user)
				let vehicle = this.handelAllFindConpany(data.companyRanking.vehicle)
				let brand = this.handelAllFindConpany(data.carStatistics.brand)
				let carType = this.handelAllFindConpany(data.carStatistics.carModel)
				this.rankingAllPay = {
					price,
					user,
					vehicle
				}
				this.rankingTypeAllPay = {
					brand,
					carType
				}
				// console.log(data)
			},
			// 按揭
			mortgage(data) {
				let price = this.handelAllFindConpany(data.companyRanking.amount)
				let user = this.handelAllFindConpany(data.companyRanking.user)
				let vehicle = this.handelAllFindConpany(data.companyRanking.vehicle)
				let brand = this.handelAllFindConpany(data.carStatistics.brand)
				let carType = this.handelAllFindConpany(data.carStatistics.carModel)
				this.rankingMortgage = {
					price,
					user,
					vehicle
				}
				this.rankingTypeMortgage = {
					brand,
					carType
				}
			},
			// 获取所有统计数据
			async getData() {
				const {data} = await getFindCarSta1()
				// console.log(data)
				{
					this.statisticsData[0].num = data.statistics.numberOfCarSearchesPerYear
					this.statisticsData[1].num = data.statistics.numberOfCarSearchesThisQuarter
					this.statisticsData[2].num = data.statistics.numberOfCarSearchesThisMonth
					this.statisticsData[3].num = data.statistics.numberOfCarSearchesThisWeek
				}
				this.allFindCar(data)
				this.payAll(data.statistics.fullAmount)
				this.mortgage(data.statistics.mortgage)
				this.$refs.tabs.resize()
				this.resize = true
			}
		},
		mounted() {
      document.querySelector('body').setAttribute('style', 'background-color:#F8F8F8')
    },
    created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
      // 修改页面标题
      document.title = "寻车统计"
      // 获取路由链接上拼接的token值
      this.getTokenInUrl()
			this.getData()
			this.$nextTick(()=>{
				// alert('执行到了')
				// this.$refs.tabs.resize()
				// document.getElementsByClassName('van-tabs__line')[0].style.transform = 'none'
				// document.getElementsByClassName('van-tabs__line')[0].style.color = '70px !important'
				// console.log( document.getElementsByClassName('van-tabs__line')[0].style.cssText	)
			
				let myHeight = `100vh - ${this.phoneStatusBarHeight}`
				document.querySelector('.ranking').style.height = '85vh'
				// this.$toast({message: '执行到了'})
			})
    },
	}
</script>

<style scoped lang="less">
.van-tabs__line{
	transform: none !important;
	color: pink;
}
	.find-car-statistics{
		.van-tab{
			font-size: 15px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
		}
		.find-time{
			margin: 16px;
		}
		.ranking{
			margin: 16px;
		}
	}
</style>
